.job-select-page-container {
  padding: 32rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;

  .search-input {
    flex: 1;
    margin-left: 16rpx;
    font-size: 28rpx;
    color: #333;
    &::placeholder {
      color: #999;
    }
  }
}

.tip {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  font-size: 24rpx;
  color: #999;

  .nut-icon {
    margin-right: 8rpx;
  }
}

.main-content {
  display: flex;
  height: calc(100vh - 200rpx); // 根据实际布局调整高度
  overflow: hidden;
}

.sidebar {
  width: 200rpx; // 左侧宽度
  flex-shrink: 0; // 防止被压缩
  background-color: #f7f8fa; // NutUI SideBar 默认背景色
  .nut-side-bar-item {
    padding: 32rpx 20rpx;
    font-size: 28rpx;
    text-align: center;
  }
  .nut-side-bar-item--active {
    background-color: #fff; // 选中项背景
    border-left: 8rpx solid #00a870; // 左侧选中指示条
    color: #00a870; // 选中项文字颜色
    font-weight: bold;
  }
}

.content-area {
  flex: 1; // 占据剩余空间
  padding: 32rpx;
  background-color: #fff;
  box-sizing: border-box;

  .job-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }

  .job-item {
    width: 48%; // 每行两个
    padding: 20rpx 32rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f8f8f8;
    transition: all 0.3s ease;

    &.job-item--selected {
      background-color: #00a870;
      color: #fff;
      border-color: #00a870;
    }
  }

  .no-results {
    text-align: center;
    padding: 60rpx 0;
    font-size: 28rpx;
    color: #999;
  }
}

// 如果添加了底部按钮，可以使用类似 Index 页面的样式
// .footer-button {
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   padding: 32rpx;
//   background-color: #fff;
//   box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
//
//   .button-wrapper {
//     background-color: #00a870;
//     border-radius: 16rpx;
//     padding: 32rpx;
//     text-align: center;
//
//     .button-text {
//       color: #fff;
//       font-size: 32rpx;
//       font-weight: bold;
//     }
//   }
// }